<template>
  <!-- 搜索框中的 搜索出来的商品列表展示 -->
  <div>
    <van-dropdown-menu>
      <van-dropdown-item
        disabled
        v-model="value1"
        :options="option1"
        title="综合"
      />
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        title="价格"
        @change="changePrice"
      />
      <van-dropdown-item
        @change="changeCategoty"
        v-model="categoryVal"
        :options="filterCategory"
        title="分类"
      />
    </van-dropdown-menu>
    <!-- 进行商品有有的检测 如果有该商品 进行Products组件内的代码 如果没有的化 就进行 van-empty组件的代码渲染页面 -->
    <van-empty
      v-if="SearchGoodListData.length == 0"
      image="search"
      description="对不起没有该商品"
    />
    <Products v-else :SearchGoodListData="SearchGoodListData"></Products>
    <!-- <div class="shoplist">
      <div v-for="item in SearchGoodListData" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p>{{ item.name }}</p>
        <span>{{ item.retail_price | RMB }}</span>
      </div>
    </div> -->
  </div>
</template>

<script>
import Products from "@/components/Products.vue";
export default {
  data() {
    return {
      value1: "",
      //分类选择值
      categoryVal: "",
      option1: [
        { text: "由高到低", value: "desc" },
        { text: "由低到高", value: "asc" },
      ],
    };
  },
  beforeUpdate() {
    // 修改categoryVal 的值为 Checked这一项为true的id值;
    this.filterCategory.map((item) => {
      if (item.checked) {
        this.categoryVal = item.value;
      }
    });
  },
  methods: {
    changeCategoty(val) {
      //当点击分类中的选项导致分类中的值发生变化的时候需要发送请求重新渲染页面
      //ui组件自带方法可以传Val的值
      this.$emit("changeCategoty", val);
    },
    changePrice(val) {
      //val 就是 desc 或者asc
      this.$emit("changePrice", val);
    },
  },
  components: {
    Products,
  },
  props: ["SearchGoodListData", "filterCategory"],
};
</script>
 
<style lang = "less" scoped>
</style>